<template>
	<div class="anime">
		<div class="blue"></div>
		<div class="red"></div>
	</div>
</template>

<script>
import anime from "animejs";

export default {
	name: "anime",
	data() {
		return {};
	},
	methods: {
		anime() {
			// eslint-disable-next-line no-undef
			anime({
				targets: '.blue',
				duration: 3000,
				translateX: 250,
				borderRadius: ['0%', '100%'],
				opacity: 0.5,
				// scale: 1,
				// rotate: '1turn'
			})
		}
	},
	mounted() {
		this.anime();
	}
}
</script>

<style lang="less" scoped>
.anime {
	.blue {
		width: 80px;
		height: 80px;
		background-color: blue;
	}
	.red {
		.blue;
		background-color: red;
	}
}
</style>